import { withState } from "../context";
import React, { useCallback, useEffect, useState } from "react";

class ListItem extends React.Component {

    handleClick = (e) => {
        this.props.onItemClick(e);
    }
    componentDidUpdate() {
        console.log(this.props.desc, "did update");
    }
    componentDidMount() {
        console.log(this.props.desc, "did mount");
    }
    componentWillUnmount() {
        console.log(this.props.desc, "will unmount");
    }
    render() {
        return <div className="item">{this.props.desc}
            <button onClick={() => { this.props.handleRemove(this.props.desc) }}>Remove</button>
        </div>
    }
}

class ListItems extends React.Component {
    handleClose() {
        console.log("hide");
    }
    render() {
        return <div className="items">
            <div>just a test label</div>
            {this.props.items.map((item, i) => {
                // return <ListItem key={item.desc} {...item} onItemClick={this.props.onItemClick} handleRemove={this.props.handleRemove} />
                return <ListItem key={i} {...item} onItemClick={this.props.onItemClick} handleRemove={this.props.handleRemove} />
            })}
            <div>肯肯</div>
            {this.props.children}
        </div>
    }
}
const TodoListApp = function (props) {
    const counterArr = useState(1);
    const [counter, setCounter] = counterArr;
    // const [state, dispatch] = useReducer(reducer, initState);
    const { state, dispatch, forwardedRef } = props;

    const handleAddClick = useCallback(() => {
        setCounter(pre => pre + 1)
    }, [setCounter]);

    const s = useCallback((e) => {
        dispatch({ type: "sort" });
    }, [dispatch]);

    const sb = useCallback((desc) => {
        dispatch({ type: "finished", desc })
    }, [dispatch]);

    useEffect(() => {
        console.log("todolist app is updating");
    });

    const en = useCallback((e) => {
        if (e.key === "Enter") {
            dispatch({ type: "increment", desc: e.target.value });
            e.target.value = "";
        }
    }, [dispatch]);
    const rm = useCallback((desc) => {
        dispatch({ type: "remove", desc })
    }, [dispatch]);
    return <div id="app">
        <button onClick={(e) => { handleAddClick(e) }}>+</button>
        <p>{counter}</p>
        <input onKeyPress={en} />
        <button onClick={s}>Sort</button>
        <ListItems ref={forwardedRef} items={state.items} onItemClick={sb} handleRemove={rm} >
            {
                [1, 2, 3].map(i => <div key={i}>test children {i}</div>)
            }
        </ListItems>
    </div>
}

class TodoListAppRef extends React.Component {
    sb = (desc) => {
        dispatch({ type: "finished", desc })
    }
    rm = (desc) => {
        dispatch({ type: "remove", desc })
    }
    render() {
        const { state, dispatch, forwardedRef } = this.props;

        return <ListItems ref={forwardedRef} items={state.items}
            onItemClick={this.sb} handleRemove={this.rm} >
            {
                [1, 2, 3].map(i => <div key={i}>test children {i}</div>)
            }
        </ListItems>
    }
}

export default withState(TodoListApp);